<template>
  <div id="app">
    <div class="header">网页头部</div>
    <div class="content">
      <ul>
        <!-- 在父组件里写入子组件标签 在子组件标签属性里用v-for遍历list数据 然后把list里的item动态绑定赋值给子组件的item，子组件是单个li，v-for是展示渲染列表数据，所以会根据数据的长度渲染对应的数量-->
        <GouPiao v-for="(item) in list" :item="item" :key="item.id"/>
      </ul>
    </div>
    <div class="footer">网页底部</div>
  </div>
</template>

<script>

//引入对应的组件---GouPiao
import GouPiao from './components/GouPiao.vue';
//引入对应的数据js文件
import {list} from './data (3).js';


//将app暴露出去
export default {
  name: 'App',
  data(){
    return {
      list,
    };
  },
  components: {
    //注册组件
    GouPiao,
  },
  
}

</script>

<style lang="scss">
// #app {
//   font-family: Avenir, Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   text-align: center;
//   color: #2c3e50;
//   margin-top: 60px;
// }

 
* {
        margin: 0;
        padding: 0;
      }

      ul,
      li {
        list-style: none;
      }

      .footer,
      .header {
        width: 1200px;
        height: 80px;
        margin: 0 auto;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 40px;
        color: #fff;
      }

      .footer {
        height: 300px;
        font-size: 100px;
      }

      .content {
        width: 1200px;
        padding: 10px 0;
        margin: 0 auto;
      }

      ul {
        height: 450px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        
      }

      li {
        width: 280px;
        border: 1px solid #333;
        padding-bottom: 10px;
        margin-bottom: 10px;
      }

      li > img {
        width: 280px;
        height: 320px;
        display: block;
      }

      li > p {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        text-align: left;
        font-size: 8px;
      }
</style>
